<template>
    <!-- 
    <b-modal ref="my-modal" hide-footer title="Using Component Methods">
     <div class="d-block text-center">
       <h3>Hello From My Modal!</h3>
     </div>
     <b-button class="mt-3" variant="outline-danger" block @click="hideModal">Close Me</b-button>
     <b-button class="mt-2" variant="outline-warning" block @click="toggleModal">Toggle Me</b-button>
   </b-modal> 
    -->
    <!--
        body-class="modalStyle" 表示样式
        size="lg" 表示模态窗口大小 xl,lg,sm,full
        hide-footer 表示隐藏底部按钮
        hide-header 表示隐藏头部内容
        no-close-on-backdrop 表示鼠标点击背景不可关闭
        hide-header-close 表示隐藏头部关闭按钮
        centered 居中
        ok-title=“确定” 
        cancel-title=取消
        @ok="handleOk" 
        @cancel="handleCancel"
        @close="handleCancel" 监听关闭窗体事件
        scrollable 滚动条
        hide-backdrop 隐藏背景
        wrapClassName="ant-modal-cust-warp" 
        style="top:5%;height: 85%;overflow-y: hidden" 样式
    -->
    <b-modal ref="my-modal" :title="title" content-class="fullWinBody" hide-footer size="fullWin"  scrollable no-close-on-backdrop @close="handleClose">
        <div class="d-block text-center">
            <div class="panel-body">
                <div class="m-form m-form--fit m-form--label-align-left m-form--group-seperator-dashed">
                    <div class="form-group m-form__group row">
                        <div class="col-lg-5">
                            <label class="col-form-label" style="padding-top: .1rem;font-size: 16px;font-weight: 100;">Mac</label><br>
                            <label class="col-form-label" style="padding-top: .1rem;font-size: 16px;font-weight:500;">{{mac }}</label>
                        </div>
                        <div class="col-lg-5">
                            <label class="col-form-label" style="padding-top: .1rem;font-size: 16px;font-weight: 100;">ip</label><br>
                            <label class="col-form-label" style="padding-top: .1rem;font-size: 16px;font-weight:500;">{{ip  }}</label>
                        </div>
                    </div>
                    <div class="form-group m-form__group row">
                        <div class="col-lg-6">
                            <div id="mainMem" :style="{height: winHeight}" style="width:100%;text-align: center;margin: auto;"></div>
                        </div>
                        <div class="col-lg-6">
                            <div id="mainCpu" :style="{height: winHeight}" style="width:100%;text-align: center;margin: auto;"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <template slot="modal-footer">
            <!--自定义按钮-->
        </template>
    </b-modal>
</template>
<script>
import apiUtil from "@/core/util/apiUtil.js";
import { handleNotify, handleAlert, handleConfirm, showWating, closeWating } from "@/core/util/jehcUtil.js";
import { setTimeout } from "timers";
export default {
    data() {
        return {
            winHeight:(window.innerHeight - 280)+"px",
            title:"实时信息",
            memChart:null,
            cpuChart:null,
            timer_ :null,
            mac:"",
            ip:"",
            id:"",
            scmsMonitorForm: {}
        }
    },
    components: {

    },
    watch: {
    },
    mounted() {
       
    },
    methods: {
        showModal(id,ip,mac) {
            this.restForm();
            this.$refs['my-modal'].show();
            
            this.title="实时信息 "+ip;   
            this.mac = mac;
            this.ip =ip;
            this.id = id;
            setTimeout(this.initMemChart, 500);
            setTimeout(this.initSCMSMonitorCpuChart, 500);
            let timer = setInterval(() => {
                this.initSCMSMonitorData();
            }, 5000);
            this.timer_ = timer;
        },
        hideModal() {
            this.$refs['my-modal'].hide()
        },
        toggleModal() {
            // 当模态已隐藏时，我们传递要返回焦点的按钮的ID
            this.$refs['my-modal'].toggle('#toggle-btn')
        },
        restForm() {
            //重置
            Object.assign(this.$data.scmsMonitorForm, this.$options.data().scmsMonitorForm);
        },
        handleClose(){
            this.mac = "";
            this.id = "";
            this.ip = "";
            this.cpuChart = null;
            this.memChart = null;        
            clearInterval(this.timer_);
        },
        initSCMSMonitorData(){
            this.initMemData();//加载内存数据
            this.initSCMSMonitorCpuData();//加载cpu数据
        },
        initMemChart(){
            this.memChart = this.$echarts.init(document.getElementById('mainMem'));
            this.memChart.setOption({
                title: {
                    show:true,    // 是否显示标题组件,（true/false）
                    text:'Memory',   // 主标题文本，支持使用\n换行
                    textAlign:'auto',    //整体水平对齐（包括text和subtext）
                    textVerticalAlign:'auto',//整体的垂直对齐（包括text和subtext）
                    padding:0,    // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
                    left:'auto',    // title组件离容器左侧距离，写法如'5'||'5%'
                    right:'auto',    //'title组件离容器右侧距离
                    top:'auto',    // title组件离容器上侧距离
                    bottom:'auto',    // title组件离容器下侧距离
                    borderColor: '#fff',     // 标题边框颜色
                    borderWidth: 1,    // 边框宽度（默认单位px）
                    textStyle: {    // 标题样式
                        color: '#ccc',    //字体颜色
                        fontStyle: 'normal',    //字体风格
                        fontSize: 13,    //字体大小
                        fontWeight: 400,    //字体粗细
                        fontFamily: 'sans-serif',    //文字字体
                        lineHeight: '13',    //字体行高
                        align:'center',//文字水平对齐方式（left/right）
                        verticalAlign:'middle',//文字垂直对齐方式（top/bottom）
                    },
                    subtext: '',    // 副标题
                    subtextStyle: {    // 副标题样式
                        color: '#ccc',
                        fontStyle:'normal',
                        fontWeight:'normal',
                        fontFamily:'sans-serif',
                        fontSize:11,
                        lineHeight:11,
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        animation: false, //很重要！
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                legend: {
                    data: ['使用量', '剩余量', '交换区使用量', '交换区剩余量']
                },
                /*toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },*/
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        // name: '单位（MB）',
                        type: 'value',
                        axisLabel:{
                            color: "#1e1e1e",
                            formatter: this.labelFormatter,
                            inside: false,
                            fontSize:'0.2rem',
                            fontWeight: 'bold'
                        }
                    }
                ],
                series: [
                    {
                        name: '使用量',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#e7bcf3' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#e7bcf3' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: []
                    },
                    {
                        name: '剩余量',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: []
                    },
                    {
                        name: '交换区使用量',
                        type: 'line',
                        stack: '总量',
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#FFDB5C' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#FFDB5C' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: []
                    },
                    {
                        name: '交换区剩余量',
                        type: 'line',
                        stack: '总量',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#9FE6B8' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#9FE6B8' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        },
                        data: []
                    }
                ]
            });
        },
        labelFormatter(value) {
            return value+" mb"
        },
        initMemData(){
            if(null != this.mac && '' != this.mac && null != this.memChart){
                apiUtil.post(process.env.VUE_APP_OMP_API+"/scms/monitorMem/mems?mac="+this.mac).then(({ data }) => {
                    let option =  this.memChart.getOption();
                    option.xAxis[0].data = data.data.xdata;
                    option.series[0].data = data.data.ydata0;
                    option.series[1].data = data.data.ydata1;
                    option.series[2].data = data.data.ydata2;
                    option.series[3].data = data.data.ydata3;
                    this.memChart.setOption(option);
                });
            }            
        },
        initSCMSMonitorCpuChart(){
            this.cpuChart = this.$echarts.init(document.getElementById('mainCpu'));
            this.cpuChart.setOption({
                    title: {
                        show:true,    // 是否显示标题组件,（true/false）
                        text:'CPU',   // 主标题文本，支持使用\n换行
                        textAlign:'auto',    //整体水平对齐（包括text和subtext）
                        textVerticalAlign:'auto',//整体的垂直对齐（包括text和subtext）
                        padding:0,    // 标题内边距 写法如[5,10]||[ 5,6, 7, 8] ,
                        left:'auto',    // title组件离容器左侧距离，写法如'5'||'5%'
                        right:'auto',    //'title组件离容器右侧距离
                        top:'auto',    // title组件离容器上侧距离
                        bottom:'auto',    // title组件离容器下侧距离
                        borderColor: '#fff',     // 标题边框颜色
                        borderWidth: 1,    // 边框宽度（默认单位px）
                        textStyle: {    // 标题样式
                            color: '#ccc',    //字体颜色
                            fontStyle: 'normal',    //字体风格
                            fontSize: 13,    //字体大小
                            fontWeight: 400,    //字体粗细
                            fontFamily: 'sans-serif',    //文字字体
                            lineHeight: '13',    //字体行高
                            align:'center',//文字水平对齐方式（left/right）
                            verticalAlign:'middle',//文字垂直对齐方式（top/bottom）
                        },
                        subtext: '',    // 副标题
                        subtextStyle: {    // 副标题样式
                            color: '#ccc',
                            fontStyle:'normal',
                            fontWeight:'normal',
                            fontFamily:'sans-serif',
                            fontSize:11,
                            lineHeight:11,
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false, //很重要！
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['用户使用率', '系统使用率', '总使用率', '前空闲率']
                    },
                    /*toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },*/
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: []
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel:{
                                color: "#1e1e1e",
                                formatter: this.labelFormatter1,
                                inside: false,
                                fontSize:'0.2rem',
                                fontWeight: 'bold'
                            }
                        }
                    ],
                    series: [
                        {
                            name: '用户使用率',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#e7bcf3' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#e7bcf3' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: []
                        },
                        {
                            name: '系统使用率',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: 'rgba(58,132,255, 0.5)' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: 'rgba(58,132,255, 0)' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: []
                        },
                        {
                            name: '总使用率',
                            type: 'line',
                            stack: '总量',
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#FFDB5C' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#FFDB5C' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: []
                        },
                        {
                            name: '前空闲率',
                            type: 'line',
                            stack: '总量',
                            label: {
                                normal: {
                                    show: true,
                                    position: 'top'
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0, color: '#9FE6B8' // 0% 处的颜色
                                    }, {
                                        offset: 1, color: '#9FE6B8' // 100% 处的颜色
                                    }],
                                    global: false // 缺省为 false
                                }
                            },
                            data: []
                        }
                    ]
                });
        },
        labelFormatter1(value) {
            return value+" %"
        },
        initSCMSMonitorCpuData(){
            if(null != this.mac && '' != this.mac && null != this.cpuChart){
                apiUtil.post(process.env.VUE_APP_OMP_API+"/scms/monitorCpu/cpu?mac="+this.mac).then(({ data }) => {
                    let option =  this.cpuChart.getOption();
                    option.xAxis[0].data = data.data.xdata;
                    option.series[0].data = data.data.ydata0;
                    option.series[1].data = data.data.ydata1;
                    option.series[2].data = data.data.ydata2;
                    option.series[3].data = data.data.ydata3;
                    this.cpuChart.setOption(option);
                });
            }    
        },
    }
}
</script>